import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {CSSTransition} from 'react-transition-group';
import {actionCreators} from './store'
import {logout} from '../../pages/login/store/actionCreator'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoUpdate,
    SearchInfoWrapper,
    SearchItem
} from './style'


class Header extends Component {

    getListArea() {
        const {focused, list, page, totalPage, handleMouseEnter, handleMouseLeave, mouseIn, handleChangePage} = this.props;
        const pageList = []
        const jsList = list.toJS();
        if (jsList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(<SearchItem key={jsList[i]}>{jsList[i]}</SearchItem>)
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoWrapper>
                        <SearchInfoTitle>热门搜索</SearchInfoTitle>
                        <SearchInfoUpdate onClick={() => handleChangePage(page, totalPage, this.icon)}>
                            <i ref={(icon) => {
                                this.icon = icon
                            }} className="iconfont spiner">&#xe665;</i>
                            换一批</SearchInfoUpdate>
                    </SearchInfoWrapper>
                    <SearchInfoWrapper>
                        {pageList}
                    </SearchInfoWrapper>
                </SearchInfo>
            )
        } else {
            return null
        }
    }

    render() {
        const {focused, handleInputFocus, handleInputBlur, list, login, handelLogout} = this.props
        return (
            <HeaderWrapper>
                <Link to="/">
                    <Logo />
                </Link>
                <Nav>
                    <NavItem className='left'>首页</NavItem>
                    <NavItem className='left'>下载APP</NavItem>
                    {
                        login ?
                            <Link to="/"><NavItem className='right' onClick={handelLogout}>退 出</NavItem></Link>:
                            <Link to="/login"><NavItem className='right'>登 陆</NavItem></Link>
                    }

                    <NavItem className='right'>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused}
                            timeout={200}
                            classNames='slide'>
                            <NavSearch
                                className={focused ? 'focused' : ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            />
                        </CSSTransition>
                        <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe603;</i>
                        {this.getListArea()}
                    </SearchWrapper>

                    <Addition>
                        <Link to="/write">
                            <Button className='writting'>
                                <i className="iconfont">&#xe708;</i> 写文章
                            </Button>
                        </Link>
                        <Button className='reg'>注册</Button>
                    </Addition>
                </Nav>
            </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        focused: state.get('header').get('focused'),
        list: state.get('header').get('list'),
        page: state.get('header').get('page'),
        totalPage: state.get('header').get('totalPage'),
        mouseIn: state.get('header').get('mouseIn'),
        login:state.getIn(['login','loginFlag'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            list.size === 0 && dispatch(actionCreators.getList())
            dispatch(actionCreators.searchFocus())
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur())
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
            if (originAngle) {
                originAngle = parseInt(originAngle, 10)
            } else {
                originAngle = 0
            }
            spin.style.transform = `rotate(${originAngle + 360}deg)`
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1))
            } else {
                dispatch(actionCreators.changePage(1))
            }
        },
        handelLogout(){
            dispatch(logout(false))
        }
    }

}

export default connect(mapStateToProps, mapDispatchToProps)(Header);